
<template>
  <div class="indexBox">
    <ImitateNav v-model="currentNav" @hideBoard="hideBoard"></ImitateNav>
    <!-- 搜索栏 -->
    <!-- <div class="mt24 flex contentBox">
      <div class="searchBox relative">
        <a-button type="primary" class="searchBtn fr">搜索</a-button>
        <a-input ref="searchInput" v-model="searchData" placeholder="请输入关键词搜索">
          <a-icon type="search" slot="prefix" style="color: #4BB7FF" />
        </a-input>
      </div>
    </div>-->

    <div class="fullScreenBox">
      <!-- 看板分类 -->
      <!-- <div
        class="flex noticeboardBox"
        :class="{'hide': isHide, 'absolute': fullscreenStatus}"
        @mouseleave="mouseLeave"
      >
        <div class="noticeboardIcon flexColumn flex-center">
          <div class="cliBox">
            <img src="../../assets/icons/noticeboard.png" />
          </div>看板分类
        </div>
        <div class="noticeboardNav flex">
          <div class="justCut finger" @click="clickLeft">
            <a-icon type="left-circle" style="color: #2175FF; fontSize: 24px" />
          </div>

          <div class="justCon">
            <div class="justScrollBox" :style="{left: moveLeft + '%'}">
              <div
                v-for="(item, index) in navList"
                :key="'navList' + index"
                class="noticeboardNavItem flex-center"
                @click="switchNav(index, item.path)"
              >
                <div class="flex font14 relative">
                  <img
                    :src="require('../../assets/icons/' + (index === navIndex ? item.activeIconName : item.iconName) + '.png')"
                  />
                  {{ item.title }}
                  <span
                    class="tips bg-red"
                    v-if="item.tipsNum"
                  >{{ item.tipsNum }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="justCut finger" @click="clickRight">
            <a-icon type="right-circle" style="color: #2175FF; fontSize: 24px" />
          </div>
        </div>
      </div>
      <div class="handleNoticeboardBox" v-if="isHide" @mouseover="mouseOver"></div>-->
      <router-view />
    </div>
  </div>
</template>

<script>
import ImitateNav from '@/components/_ImitateNav/ImitateNav'
import RunBoard from './BoardPage/RunBoard'

import { putAction, postAction, getAction } from '@/api/manage'

export default {
  name: 'TableList',
  components: {
    ImitateNav,
    RunBoard,
  },
  data() {
    return {
      searchData: '',
      currentNav: '看板内容',
      isHide: false,
      fullscreenStatus: false,
      visible: false,
      confirmLoading: false,
      navList: [
        // 之后可获取配置
        { title: '经营看板', iconName: 'board', path: '/runboard', activeIconName: 'boardActive', tipsNum: 40 },
        { title: '视屏看板', iconName: 'board', path: '/videoBoard', activeIconName: 'boardActive', tipsNum: 1 },
        { title: '数据看板', iconName: 'board', path: '/DataBoard', activeIconName: 'boardActive', tipsNum: 1 },
        { title: '办公看板', iconName: 'board', path: '/OfficeBoard', activeIconName: 'boardActive', tipsNum: 1 },
        { title: '报警看板', iconName: 'board', path: '/AlarmBoard', activeIconName: 'boardActive', tipsNum: 1 },
        { title: '生产看板', iconName: 'board', path: '/productboard', activeIconName: 'boardActive', tipsNum: 0 },
        { title: '发料看板', iconName: 'board', path: '/isuueboard', activeIconName: 'boardActive', tipsNum: 3 },
        { title: '收料看板', iconName: 'board', path: '/reciveboard', activeIconName: 'boardActive', tipsNum: 4 },
        { title: '财务看板', iconName: 'board', path: '/financeboard', activeIconName: 'boardActive', tipsNum: 5 },
        { title: '临时看板', iconName: 'board', path: '/temp', activeIconName: 'boardActive', tipsNum: 0 },
      ],
      navIndex: 0,
      moveLeft: 0,
    }
  },

  filters: {},
  methods: {
    /* 分类导航跳转 */
    switchNav(index, path) {
      this.navIndex = index
      this.$router.push('/a/home' + path)
    },
    /* 隐藏board方法 */
    hideBoard(flag) {
      this.fullscreenStatus = flag
      this.isHide = flag
    },
    /* 鼠标置顶移入 */
    mouseOver() {
      this.isHide = false
    },
    /* 鼠标移出 */
    mouseLeave() {
      if (!this.fullscreenStatus) return
      this.isHide = true
    },

    clickLeft() {
      let direction = 'left'
      this.scrollImg(direction)
    },
    clickRight() {
      let direction = 'right'
      this.scrollImg(direction)
    },
    scrollImg(direction) {
      if (direction === 'left') {
        if (this.moveLeft >= 0) return
        this.moveLeft += 20
      } else {
        if (this.moveLeft <= (this.navList.length - 5) * -20) return
        this.moveLeft -= 20
      }
    },
  },
}
</script>

<style lang="less">
.indexBox {
  .warp {
    width: 90%;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      &.ul-item {
        display: flex;
        .li-item {
          width: 160px;
          height: 100px;
          margin-right: 10px;
          line-height: 100px;
          background-color: #999;
          color: #fff;
          text-align: center;
          font-size: 30px;
        }
      }
    }
  }
  /* 搜索栏 */
  .contentBox {
    background-color: white;
  }
  .fullScreenBox {
    background-color: #f0f2f5;
    position: relative;
    height: calc(100%);
    // height: calc(100% - 138px - 24px);
  }
  /* 看板分类 */
  .handleNoticeboardBox {
    height: 1px;
    background-color: #f0f2f5;
  }
  .hide {
    margin-top: -100px;
  }
  .show {
    margin-top: 0px;
  }
  .absolute {
    width: 100%;
    box-shadow: 0px 2px 5px #888888;
    z-index: 999;
  }
  .noticeboardBox {
    height: 100px;
    background-color: white;
    transition: 0.5s;
    .noticeboardIcon {
      width: 25%;
      min-width: 10px;
      background-color: #2175ff;
      color: white;
      .cliBox {
        width: 48px;
        height: 36px;
        overflow: hidden;
        img {
          width: 48px;
        }
      }
    }
    .noticeboardNav {
      width: 100%;
      // overflow-x: auto;
      .justCut {
        width: 5%;
        text-align: center;
        line-height: 110px;
      }
      .justCon {
        width: 90%;
        overflow: hidden;
        .justScrollBox {
          height: 100%;
          width: 400%;
          position: relative;
          transition: 0.2s;
          & > div {
            float: left;
          }
        }
      }
    }
    .noticeboardNavItem {
      min-width: 5%;
      height: 100%;
      cursor: pointer;
      & > div {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #888888;
      }
      img {
        width: 32px;
        margin-bottom: 8px;
      }
      .tips {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 12px;
        line-height: 20px;
        text-align: center;
        color: white;
        font-size: 12px;
        right: -20px;
        top: -10px;
      }
    }
  }
}
//滑动样式
</style>
